<template>
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="popup">
			<view class="tip">
				 <text>{{title}}</text>
			</view>
			<view style="margin-top:30rpx;">
				 
				<scroll-view class="scroll" scroll-y>
					<view class="couponlist">
						<view class="couponbox" v-for="(item,index) in couponList" :key="index">
							<view class="coupon">
								<view class="coupon-left">
									<view class="price"> {{item.discountPrice}}</view>
									<view class="priceuse"> 满{{item.usePrice}}元可用</view>
								</view>
								<view class="coupon-right">
									<view class="coupontitle"> {{item.name}}</view>
									<view class="coupontime"> {{item.validEndTime | formatDate('YYYY-MM-DD')}}到期</view>
									<view class="couponbar" @click="item.showDescript=item.showDescript?true:false">
										使用说明 <u-icon name="arrow-right" size="15"></u-icon>
									</view>
								</view>
								<view class="btn" @click="handleChange(item)" v-if="item.usePrice<money"> 使用 </view>
								<view class="btn"  style="background-color: #AAAAAA;" v-else> 未达满减 </view> 
							</view>
							<view class="descript" v-if="item.showDescript">
								<view>
									1.仅限于该服务人员可用 
								</view>
								<view>
									2.保洁类可用、工程类可用、陪护类可用
								</view>
								<view>
									3.限有限期内，周二/周四/周五可使用，过期无效
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="woodsbtn" style="width: 90%;margin: 20rpx auto;" @click="handleChange({discountPrice:0,id:''})">
				不使用优惠券
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	export default {
		name:"woods-popupModal",
		props: {
			 couponTypeList:{
				 type:Array,
				 default:()=>[]
			 },
			 title:{
				 type:String,
				 default:"可用优惠券"
			 }
		},
		 
		data() {
			return {
				visible:false,
				money:0,
				checked:{
					
				}, 
				couponList:[],
				n:""
			};
		},
		 
		methods:{
			getcoupon(n,list,money){
				this.visible=true
				this.n=n
				this.couponList=list
				this.money= money
			},
			/*
			@description 回调事件
			*/ 
			handleChange(item){
				this.visible=false
				this.$emit("handleChoseCoupon",item,this.n)
			},
			 
			
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	.scroll{
		width: 100%;
		height: 600rpx;
		padding-bottom: 30rpx;
		/* background-color: red; */
	} 
}
.coupon {
		background: #fff url('https://jiejinda.oss-cn-beijing.aliyuncs.com/bc23b3dec3aff55f7c83c6620effa30067bb5c4cd48a2e0ce7c8085687548b25.png') 0 0 no-repeat;
		background-size: cover;
		height: 180rpx;
		width: 100%;
		display: flex;
		position: relative;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.coupon-left {
			width: 32%;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.price {
				font-weight: bold;
				font-size: 72rpx;
				color: #FFFFFF;
				line-height: 40rpx;

			}

			.priceuse {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 15rpx;
				line-height: 40rpx;
			}

		}

		.coupon-right {
			width: 55%;

			.coupontitle {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				text-align: left;
				margin-left: 10rpx;
				line-height: 60rpx;
			}

			.coupontime {
				font-size: 24rpx;
				color: #999999;
				line-height: 58rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left: 18rpx;
			}

			.couponbar {
				font-size: 24rpx;
				display: flex;
				color: #999999;
				line-height: 58rpx; 
				margin-left: 12rpx;
			}
		}

		.btn {
			position: absolute;
			right: 12rpx;
			top: 60rpx;
			background: #277EEF;
			border-radius: 34rpx;

			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			padding: 10rpx 25rpx;
		}
	}
	.descript {
		background-color: #F0F0F0;
		font-size: 20rpx;
		color: #666;
		padding: 16rpx 24rpx;
		border-radius: 0 0 20rpx 20rpx;
	} 
</style>